<template>
	<view class="box">
		<scroll-view class="content" scroll-y="true" style="height: 700rpx;">
			<view class="content-box">
				<view class="card" v-for="it in info.msg" >
          <text class="card-title" selectable="true">{{it.key}}: </text>
          <text selectable="true">{{it.value}}</text>
			  </view>
			</view>
			
			<view class="close" @click="close">
        <i class="iconfont">&#xeca0;</i>
      </view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
const props = defineProps(['info']);
const emit = defineEmits(['closeDetail']);

function close() {
  emit('closeDetail');
}
</script>

<style lang="scss" scoped>
	.box {
		z-index: 5;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(#ebebeb, 0.5);
		
		.content {
			box-sizing: border-box;
			width: 500rpx;
			height: 700rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			
			
			padding: 0rpx;
			background-color: #FFFFFF;
			box-shadow: 5rpx 5rpx 8rpx 0rpx rgb(0, 0, 0, 0.2);
			.content-box {
				
				
				padding: 20rpx;
			}
			.card {
				display: -webkit-box;
			

				white-space: normal !important;
				text-overflow: ellipsis;
				word-wrap: break-word;
			
				-webkit-box-orient: vertical;
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;
			}
			.card-title {
				color: #336699;
				padding-right: 20rpx;
				font-size: 28rpx;
			}
			
			.close {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				vertical-align: middle;
				
				border-radius: 0 0 0 100%;
			}
		}
	}
</style>
